<template>
	<view>
		<!-- 返回 -->
		<view class="backs">
			<view @click="backlast()">
				<image src="../../static/back1.png"></image>
			</view>
			<text>{{title}}</text>
		</view>
		<view class="container">
			<view class="carousel-section">
				<!-- 背景色区域 -->
				<view class="titleNview-background"  :style="'background: url('+url()+'/wximg/bjTop1.png'+'); background-size: 100%;'"  ></view>
				<!-- 内容区域 -->
				<view class="content" :style="{height: heightContent +'px'}">
					<view class="tableBox">
						<view class="tabletitle">转出包裹信息</view>
						<view class="table">
							<wyb-table 
							:key="key"
							checker-cell-bg-color="#fff"  
							checker-color="#107e62" 
							show-vert-border="false" 
							header-bg-color="#fff" 
							first-col-bg-color="#fff" 
							 content-bg-color="#fff"
							 content-ft-color="#333333" 
							 header-weight="true" 
							 border-color="#ffffff"
							 ref="table" 
							 :headers="headers2" 
							 :contents="contents2" 
							 width="100%"
							 :show-vert-border="vertborder"
							:loading="loading"
							  />
						</view>
						<view class="total">总计：{{sum}}包</view>
					</view>
				</view>
			</view>
			<view class="allocate">
				<text class="allocateText">是否向[{{allocate}}]转出该包裹？</text>
				<button @click="dpcar" class="allocateBtnYes">是</button>
				<button @click="dpcarno" class="allocateBtnNo">否</button>
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import service from '../../service.js';
	import {allocateDeliveryMan} from '@/api/request.js';
	import url from '@/api/url.js';	
	let user=service.getUsers().user;
	export default {
		components: {
			wybTable
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				url:url,
				heightContent:'',
				allocate:'吉A58RE3',
				//表格
				key: 0,
				sum:0,
				str:'',
				id:'',
				type:'',
				object:{},
				userid:'',
				headers2:[],
				contents2:[],
				loading:true,
				vertborder:false, //金融竖向条,但是不能去除头部
				// 表格数据
				headers: [{
					label: '配送顺序',
					key: 'id',
					width:145,
				}, {
					label: '商户名称',
					key: 'date',
						width:200,
				}, {
					label: '数量',
					key: 'quantity',
						width:135,
					
				}, {
					label: '调配车辆',
					key: 'car',
					width:160,
				}],
				contents: [],
				urlCol: [{
					type: 'pages/historyDelivered/detail',
					key: 'id'
				}, {
					type: 'http',
					key: 'url'
				}]
			};
		},
		onReady(){
			let that = this
			uni.getSystemInfo({
				success: (res) => { // 需要使用箭头函数，swiper 高度才能设置成功
				// res - 各种参数
				// console.log(res.windowHeight); // 获取屏幕的高度
		　　    let info = uni.createSelectorQuery().select(".content");// 获取某个元素
		　　　  info.boundingClientRect(function(data) { //data - 各种参数
				   // 　console.log(data.top)  // 获取元素高度
					 let view  = res.windowHeight - data.top
					 that.heightContent = view
					 // console.log(that.heightContent)
	　　        }).exec()
				}
			});		
		},
		onLoad(options) {
			let tyoelist = []
			user=service.getUsers().user;
			let json = JSON.parse(decodeURIComponent(options.data));//上级信息
			let list = json.list
			let num = 0;
			for(let i=0;i<list.length;i++){
				let eg ={ id: '5', date: '八号店', quantity: '99', car: '60', listState:true, listColor:[ {"element":2,"color":"#f79c3d"}, ], }
				eg.id = list[i].lineData.id
				eg.date = list[i].lineData.date
				eg.quantity = list[i].lineData.quantity
				eg.car = json.name
				eg.listState = list[i].lineData.listState
				eg.listColor = list[i].lineData.listColor
				num+=list[i].lineData.quantity
				this.contents.push(eg)
				this.str+=list[i].lineData.shopid+","
				if(list[i].lineData.deliveryStatus == '2'){
					this.type = '2'
				}else{
					this.type = '1'
				}
			}
			this.sum = num 
			this.id = json.id
			this.userid = json.userid
			this.allocate = json.name
			this.object = options
			// this.contents = name;
			//表格加载动画
			this.wait(1000).then(() => {
				this.headers2 = this.headers.slice()
				this.contents2 = this.contents.slice()
				this.loading = false
			})
		},
		methods: {
			backlast(){
				uni.navigateBack({
					delta: 1
				});
			},
			// 确认转出包裹
			dpcar(){
				//this.addAllocate();
				
				let json = JSON.parse(decodeURIComponent(this.object.data));
				json.fname = user.username
				json.id = user.id
				json.userid = this.userid
				json.shop = this.str
				json.type = "1"
				uni.showModal({
					title: '申请已发送',
					content: '',
					showCancel: false
				})
				uni.navigateTo({
					url:'/pages/distribution/distribution'
				})
				let pasm={
					id:this.userid,
					text:JSON.stringify(json)
				}
				// this.$store.commit("send",pasm)
				
			},
			// 取消转出包裹
			dpcarno(){
				uni.navigateTo({
					url:'/pages/distribution/distribution'
				})
			},
			addAllocate(){//点击申请调配
				let  param={
					carId:this.id,
					shopid:this.str,
					userid:user.id
				};
				allocateDeliveryMan(param).then(res => {
					if (res.code == 200) {
						uni.showModal({
							title: '申请已发送',
							content: '',
							showCancel: false
						})
					} else{
						uni.showModal({
							title: '警告',
							content: 'code不符 请联系管理员',
							showCancel: false
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showModal({
						title: '请重新申请',
						content: '失败',
						showCancel: false
					})
				})
				
			},
			//表格
			onCellClick(e) {
				console.log("列表点击")
				console.log(e)
			/* 	this.event = this.jsonShowFn(e)
				this.$refs.modal.showModal() */
			},
			confirmCate(){
				
			},
			wait(time) {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve()
					}, time)
				})
			}
		}
	}
</script>
<style scoped>
	.backs {
		position: absolute;
		z-index: 11111;
		top: 85upx;
		left: 30upx;
		display: flex;
		color: #000;
		line-height: 30upx;
		align-items: center;
		display: inline-block;
	}
	
	.backs image {
		width:45upx;
		height:45upx;
		margin-right: 14upx;
	}
	.titleNview-background {
		width: 100%;
		height: 418upx;
		-webkit-transition: .4s;
		transition: .4s;
		background-size: 100% 100%;
	}
	.content {
		position: relative;
		width: 91%;
		margin: 0 auto;
		background-color: #fff;
		margin-top: -120upx;
		z-index: 2;
		border-top-left-radius:27upx;
		border-top-right-radius:27upx;
		/* 定义flex容器 */
		display: flex;
		flex:1;
		/*设置容器内部容器的排列方向*/
		flex-direction: column;
	}

	/* 表格 */
	.tableBox {
		width: 100%;
		padding-bottom: 40upx;
	}
	
	.tabletitle {
		border-top-left-radius: 27upx;
		border-top-right-radius: 27upx;
		height: 98upx;
		width: 96%;
		margin: 0 auto;
		line-height: 98upx;
		color: #000;
		font-size:32upx;
		font-weight: bold;
		text-align: center;
		border-bottom: solid 1px #eeeeee;
	}
	
	.table {
		width: 96%;
		margin: 0 auto;
	}
	.total {
		height: 98upx;
		width: 96%;
		margin: 0 auto;
		line-height: 98upx;
		color: #000;
		font-size:28upx;
		text-align: right;
		border-top: solid 1px #eeeeee;
		margin-top: 20upx;
	}
	/* 最下方是否转入 */
	.allocate {
		width:96%;
		padding: 0 2%;
		height: 200upx; 
		position: absolute; 
		bottom: 0; 
		background-color: rgba(0,0,0,.5);
		z-index: 999;
		display: flex;
		flex:1;
		/*设置容器内部容器的排列方向*/
		flex-direction:row;
		align-content: center;
		justify-content: space-between;
		align-items: center;
	}
	.allocateText {
	    line-height:200upx; 
		color: #fff;
	}
	.allocateBtnYes {
		background-color: #007457;
	}
	.allocateBtnNo {
		background-color: #f79c3d;
	}
	.allocateBtnYes,.allocateBtnNo {
		height:80upx;
		line-height:80upx;
		color: #fff;
		padding:0 50upx;
	}
</style>
